<template>
	<div class="root" tabindex="0" @keyup.up="onup()" @keyup.down="ondown()" @keyup.left="onleft()" @keyup.right="onright()" @keyup.space="stopGame()">
		<div class="vessel" ref="vessel">
			<span
				v-for="(item, index) in snake"
				:key="index"
				:class="index == 0 ? 'headsk' : 'bodysk'"
				:style="{ height: snakeHeight + 'px', width: snakeWidth + 'px', left: item[0] + 'px', top: item[1] + 'px' }"
			></span>
			<span class="food" :style="{ height: snakeHeight + 'px', width: snakeWidth + 'px', left: food[0] + 'px', top: food[1] + 'px' }"></span>
		</div>
	</div>
</template>

<script>
export default {
	data: function() {
		return {
			left: 0,
			right: 0,
			top: 0,
			bottom: 0,
			height: 0,
			width: 0,
			x: 0,
			y: 0,
			snake: [], //蛇皮怪、
			moveTime: 300, //移动时间
			snakeHeight: 15, //蛇皮高度
			snakeWidth: 15, //蛇皮宽度
			direction: 'left', //方向
			start: false, //开始
			interval: '', //定时器
			food: [300, 315], //食物
			points: [] ,//所有点
			count:0
		};
	},
	mounted() {
		//获取元素坐标
		let vessel = this.$refs.vessel.getBoundingClientRect();
		this.left = vessel.left;
		this.right = vessel.right;
		this.top = vessel.top;
		this.bottom = vessel.bottom;
		this.height = vessel.height;
		this.width = vessel.width;
		this.x = vessel.x;
		this.y = vessel.y;
		//计算所有点
		for (let x = 0; x < this.width; x += this.snakeWidth) {
			for (let y = 0; y < this.height; y += this.snakeHeight) {
				this.points.push([x, y]);
			}
		}


		//初始位置
		let xmiddle = 600;
		let ymiddle = 375;

		this.snake = [[xmiddle, ymiddle], [xmiddle + this.snakeWidth, ymiddle]];
	},
	methods: {
		move() {
			let _this = this;
			this.interval = setInterval(function() {
				let item = [];
				if (_this.direction == 'left') {
					item = [[_this.snake[0][0] - _this.snakeWidth, _this.snake[0][1]]];
				} else if (_this.direction == 'right') {
					item = [[_this.snake[0][0] + _this.snakeWidth, _this.snake[0][1]]];
				} else if (_this.direction == 'down') {
					item = [[_this.snake[0][0], _this.snake[0][1] + _this.snakeHeight]];
				} else if (_this.direction == 'up') {
					item = [[_this.snake[0][0], _this.snake[0][1] - _this.snakeHeight]];
				}

				_this.newLocation(item);
			}, this.moveTime);
		},
		newLocation(location) {
			let normal = false;
			let eat=false;
			for (let i = 0; i < this.points.length; i++) {
				if (location[0].toString() == this.points[i].toString()) {
					normal = true;
				}
			}
			if (!normal || !(JSON.stringify(this.snake).indexOf(JSON.stringify(location[0]))<0 )) {
				alert('游戏结束:'+this.count);
				clearInterval(this.interval);
				return;
			}

			// 是否吃到食物
			if (location[0].toString() == this.food.toString()) {
				this.snake.push(this.snake[this.snake.length - 1]);
				eat=true;
				this.count++;
			}
			for (let i = 0; i < this.snake.length - 1; i++) {
				location.push(this.snake[i]);
			}
			
			//更新可用点
			let jsonStr=JSON.stringify(location);
			let newPoints =  this.points.filter(function(item){
				return jsonStr.indexOf(JSON.stringify(item)) < 0;
			});
			this.snake = location;
			if(eat){
				this.food=this.points[this.random(0,this.points.length-1)];
			}
		},
		onup() {
			//向上
			if (this.direction == 'down' && this.start) {
				return;
			}
			this.direction = 'up';
			this.startGame();
			document.getElementsByTagName('span')[0].style.transform = 'rotate(0deg)';
			this.newLocation([[this.snake[0][0], this.snake[0][1] - this.snakeHeight]]);
		}, //下
		ondown() {
			if (this.direction == 'up' && this.start) {
				return;
			}
			this.direction = 'down';
			this.startGame();
			document.getElementsByTagName('span')[0].style.transform = 'rotate(180deg)';
			this.newLocation([[this.snake[0][0], this.snake[0][1] + this.snakeHeight]]);
		}, //左
		onleft() {
			if (this.direction == 'right' && this.start) {
				return;
			}
			this.direction = 'left';
			this.startGame();
			document.getElementsByTagName('span')[0].style.transform = 'rotate(270deg)';
			this.newLocation([[this.snake[0][0] - this.snakeWidth, this.snake[0][1]]]);
		}, //右
		onright() {
			if (this.direction == 'left' && this.start) {
				return;
			}
			
			this.direction = 'right';
			this.startGame();
			document.getElementsByTagName('span')[0].style.transform = 'rotate(90deg)';
			this.newLocation([[this.snake[0][0] + this.snakeWidth, this.snake[0][1]]]);
		},
		startGame() {
			//开始
			//if (!this.start) {
				clearInterval(this.interval);
				this.move();
			//}
			//this.start = true;
		},
		stopGame() {
			//停止
			clearInterval(this.interval);
			this.start = false;
		},
		
		random(min, max) {
			return Math.floor(Math.random() * (max - min)) + min;
		}
	}
};
</script>

<style scoped>
.root {
	width: 100%;
	height: 100%;
	background-color: #afafaf;
	display: flex;
	justify-content: center;
	align-items: center;
}
.vessel {
	background-color: #d4d4d4;
	height: 825px;
	width: 1200px;
	position: relative;
}
span {
	display: block;
	/* border:#000000 1px solid; */
	background-size: cover;
	position: absolute;
}
.headsk {
	background-image: url(../assets/img/head.png);
	background-size: cover;
	transform: rotate(270deg);
}

.bodysk {
	background-image: url(../assets/img/body.png);
}

.food {
	background-image: url(../assets/img/food.png);
}
</style>
